<template>
  <el-dialog title="图片附件"
             :visible.sync="show"
             append-to-body
             width="600px"
             :close-on-click-modal="false">
    <label class="label"
           v-if="!uploadDisabled">
      <div class="border"></div>
      <el-upload :action="uploadUrl"
                 ref="upload"
                 :on-success="uploadSuccess"
                 :before-upload="beforeUpload"
                 :on-error="uploadError"
                 name="file"
                 :show-file-list="false"
                 :headers="headers"
                 :data="{configName: configName}"
                 :limit="limit"
                 :accept="fileAccept">
        <el-button size="small"
                   type="primary"
                   plain>点击上传</el-button>
      </el-upload>
    </label>
    <div class="list">
      <div class="list-item"
           v-if="list.length > 0">
        <div class="item-file"
             v-for="(item, i) in list"
             :key="i">
          <div class="file"
               @click="download(item)">{{ item ? item.split("/")[item.split("/").length - 1] : "" }}</div>
          <div class="btns">
            <el-button type="text"
                       size="mini"
                       @click="fileOpen(i)">查看</el-button>
            <el-button v-if="!uploadDisabled"
                       type="text"
                       size="mini"
                       @click="delFile(i)">删除</el-button>
          </div>
        </div>
      </div>
      <div class="no-data"
           v-else>暂无图片</div>
    </div>
    <el-row style="text-align: right; margin-top: 10px"
            v-if="!uploadDisabled">
      <el-button size="small"
                 type="primary"
                 @click="comfirm">保 存</el-button>
      <el-button size="small"
                 @click="close">关 闭</el-button>
    </el-row>

    <!-- 查看图片 -->
    <View-image ref="ViewImage"></View-image>
  </el-dialog>
</template>
<script>
import { getToken } from "@/utils/auth";
import { fullLoadingMinxin } from '@/mixins/fullLoadingMinxin.js';
import ViewImage from '@/components/viewImage/index.vue';
// 允许上传图片文件类型
const IMAGE_TYPE = ['image/jpeg', 'image/png', 'image/tiff', 'image/bmp', 'image/gif'];
export default {
  mixins: [fullLoadingMinxin],
  components: {
    ViewImage,
  },
  props: {
    configName: {
      type: String,
      default: '模块名称'
    },
    uploadDisabled: { // 上传按钮禁用状态
      type: Boolean,
      default: false
    },
    limit: {  // 文件数量限制
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      show: false,
      uploadUrl: "/zy-api/commonPath/outfallReplyUpload", // 上传文件服务器地址
      headers: { Authorization: getToken() },
      fileAccept: '.jpg,.png,.tif,.bmp,.gif',
      // 上传的文件列表
      list: []
    }
  },
  methods: {
    // 打开弹窗
    open(files = '') {
      this.show = true;
      this.list = files ? files.split('|') : [];
    },
    // 关闭弹窗
    close() {
      this.show = false;
    },
    // 保存按钮
    comfirm() {
      if (this.list.length == 0) {
        this.$message.warning('请上传文件后再保存！')
        return false;
      }
      let fileUrls = this.list.join('|');
      this.$emit('saveFile', fileUrls);
      this.close();
    },
    // 文件删除按钮
    delFile(index) {
      this.list.splice(index, 1)
    },
    // 在线打开文件
    fileOpen(index) {
      // console.log(this.list)
      // console.log(path)
      this.$refs.ViewImage.open(this.list, index)
    },
    // 下载文件
    download(url) {
      this.$utils.downloadFile(url)
    },
    // 上传前验证文件格式
    beforeUpload(file) {
      console.log(file)
      const isImage = IMAGE_TYPE.includes(file.type)
      if (!isImage) {
        this.$message.error('上传图片只能是【JPG】【PNG】【GIF】【BMP】【TIF】格式!');
      }
      if (isImage) {
        this.openFullLoading(); // 打开全屏loading
      }
      return isImage;
    },
    // 上传成功回调
    uploadSuccess(file) {
      this.$message.success('上传文件成功');
      // console.log('上传文件地址：', res);
      this.list.push(file)
      this.$refs.upload.clearFiles(); // 清除文件
      this.closeFullLoading();
    },
    // 上传失败回调
    uploadError(err) {
      console.log(err);
      this.msgError(`上传文件失败`);
      this.$refs.upload.clearFiles(); // 清除文件
      this.closeFullLoading();
    },
  }
}
</script>
<style scoped lang="scss">
.label {
  display: flex;
  justify-content: space-between;
  .border {
    width: calc(100% - 100px);
    height: 33px;
  }
}
.list {
  height: 250px;
  overflow: auto;
  padding-top: 10px;
  .no-data {
    text-align: center;
    line-height: 180px;
    color: #ccc;
    font-size: 16px;
  }
}
.item-file {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 35px;
  .file {
    max-width: calc(100% - 100px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    &:hover {
      color: #1890ff;
      text-decoration: underline;
    }
  }
}
</style>